$(function() {
    // 搜索统计
    // 每日收藏数
    var glancePieChart = echarts.init(document.getElementById("echarts-goodsGlance-pie"));
    glancePieChart.clear();
    glancePieChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
    axios.get("http://127.0.0.1:8000/statistics/?field=goodsGlance&style=pie").then(
        function(response) {
            var resp = response.data
            var title = resp['title_list']
                // 饼图的标签上有名字太长的就砍掉
                // for (var i = 0; i < title.length; i++) {
                //     if (title[i].length > 10) {
                //         title[i] = title[i].substring(0, 10) + '...'
                //     }

            // }
            var data = resp['data_list']
                // 饼图数据域总数据超过10个时，名字太长的就砍掉
                // if (data.length > 10) {
                //     for (var i = 0; i < data.length; i++) {
                //         dt = data[i]
                //         if (dt['name'].length > 10) {
                //             dt['name'] = dt['name'].substring(0, 10) + '...'
                //         }
                //     }
                // }
            console.log(resp)

            glancePieChart.setOption({
                title: {
                    text: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: title
                },
                calculable: true,
                series: [{
                    name: '商品',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data
                }]
            });
            glancePieChart.hideLoading();
            $(window).resize(glancePieChart.resize);
        },
        function(err) {
            console.log(err)
            $(window).resize(glancePieChart.resize);
        }
    )

    // 总收藏数增长
    var goodsGlanceBarChart = echarts.init(document.getElementById("echarts-goodsGlance-bar"));
    axios.get("http://127.0.0.1:8000/statistics/?field=goodsGlance&style=bar").then(
        function(response) {
            var resp = response.data
            var title = resp['title_list']
            title = title.reverse()
            for (var i = 0; i < title.length; i++) {
                if (title[i].length > 10) {
                    title[i] = title[i].substring(0, 10) + '...'
                }
            }
            var data = resp['data_list']
            data = data.reverse()
                // if (data.length > 10) {
                //     for (var i = 0; i < data.length; i++) {
                //         dt = data[i]
                //         if (dt['name'].length > 10) {
                //             dt['name'] = dt['name'].substring(0, 10) + '...'
                //         }
                //     }
                // }
            console.log(resp)
            goodsGlanceBarChart.setOption({
                title: {
                    text: "", // 
                    left: 40,
                    top: 40,
                    textStyle: {
                        fontSize: 60,
                        color: "#fff",
                    },
                },
                // 坐标轴
                grid: {
                    top: "15%",
                    left: "5%",
                    right: "3%",
                    bottom: "5%",
                    containLabel: true, //是否包含坐标轴的文字
                },
                // X轴：横向柱状图，将xAxis的type设置为value
                xAxis: {
                    type: "value",
                },
                // Y轴：横向柱状图，将xAxis的type设置为category
                yAxis: {
                    type: "category",
                    data: title,
                },
                // 图表内容
                series: [{
                    type: "bar", // 图表类型
                    data: data, // 数据
                    barWidth: 66, // 柱的宽度
                    // 柱上面的数值配置
                    label: {
                        show: true, // 显示值
                        position: "right", // 显示位置
                        color: "white",
                    },
                    // 每一个条目的样式配置
                    itemStyle: {
                        barBorderRadius: [0, 34, 34, 0], // 圆角
                        // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
                        color: new this.echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: "#5050ee" },
                            { offset: 1, color: "#ab6ee5" },
                        ]),
                    },
                }, ],
                // 提示框设置
                tooltip: {
                    trigger: "axis", //触发类型——坐标轴
                    // 鼠标移入条目下面的背景
                    axisPointer: {
                        type: "line",
                        z: 0,
                        lineStyle: {
                            color: "rgba(225,225,225,.3)",
                            width: 65,
                        },
                    },
                    formatter: (params) => {
                        // console.log('params', params)
                        return params[0].name + `<br/> ` + `浏览：` + params[0].value + `次`;
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
            })

            $(window).resize(goodsGlanceBarChart.resize);
        },
        function(err) {
            console.log(err)
            $(window).resize(goodsGlanceBarChart.resize);
        }
    )
})